<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '我的分佣',
  },
}
</route>

<template>
  <view class="content-warp">
    <view class="content-top">
      <view class="content-top-nav">
        <image class="coupon-white" src="../../../static/images/coupon-white.png" mode=""></image>
        <view class="monney">{{ total }}</view>
        <!--        <wd-button custom-class="custom-shadow" open-type="share">share</wd-button>-->
      </view>
    </view>
    <view class="content">
      <view class="content-block" v-for="(item, index) in list" :key="index">
        <view class="content-block-top">
          <view>{{ item.source_member_name }}</view>
          <view class="content-block-top-right">
            <image class="coupon" src="../../../static/images/coupon.png" mode=""></image>
            <text>¥ {{ item.amount }}</text>
          </view>
        </view>
        <view class="content-block-time">2024-12-05</view>
      </view>
    </view>

    <button @click="share" open-type="share" class="share" style="position: absolute; bottom: 0">
      <buttonBtn>
        <template v-slot:pictuer>
          <image class="share-white" src="../../../static/images/share-white.png" mode=""></image>
        </template>
        <view>分享小程序获得优惠券</view>
      </buttonBtn>
    </button>
  </view>
</template>

<script setup lang="ts">
import { myCommission } from '@/service/user'
import { useToast } from 'wot-design-uni'
const toast = useToast()
function share() {
  console.log('分享')
  // 开启小程序原生右上角分享按钮
  uni.showShareMenu({
    // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'], // 开启转发好友和转发朋友圈按钮
    success(result) {
      console.log('分享成功', result)
    },
  })
  // uni.share({
  //   provider: 'weixin',
  //     scene: 'WXSceneSession',
  //     type: 0,
  //     href: 'https://www.baidu.com',
  //     title: '分享小程序',
  //     imageUrl: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
  //     success: (res) => {
  //       console.log('success:' + JSON.stringify(res))
  //     },
  //     fail: (err) => {
  //       console.log('fail:' + JSON.stringify(err))
  //     }
  //   })
}
const list = ref<ICommission[]>([])
const page = reactive<IPage>({
  page: 1,
  limit: 10,
})
const total = ref(0)
const getList = async () => {
  const res: IResData<IPageCommissionRes<ICommission>> = await myCommission(page)
  if (res.code === 1) {
    if (Array.isArray(res.data)) return
    total.value = res.data.total || 0
    list.value = page.page === 1 ? res.data?.data : list.value.concat(res.data.data || [])
  } else {
    toast.show(res.msg)
  }
}
onLoad(async () => {
  await getList()
})
onReachBottom(() => {
  if (total.value > list.value.length) {
    page.page++
    getList()
  }
})
const shareObj = {
  title: '分享小程序',
  path: '/pages/login/index/?id=1',
  desc: '123',
  content: '123',
}
</script>

<style scoped lang="scss">
.content-warp {
  background-color: #f4f4f4;
  height: 100%;
  min-height: 100vh;
  position: relative;
}

.content-top {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 13.42%;
  border-radius: 0px 0px 20px 20px;
  opacity: 1;
  background: linear-gradient(106deg, #48b760 0%, #6bb748 100%);

  .content-top-nav {
    display: flex;
    align-items: center;
    position: absolute;
    left: 32px;
    top: 30px;

    .monney {
      margin-left: 8px;
      font-family: Source Han Sans;
      font-size: 30px;
      font-weight: 500;
      line-height: 26px;
      text-align: center;
      display: flex;
      align-items: center;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }

  .content-top-nav:first-child {
    margin-left: 20px;
  }
}
.coupon-white {
  width: 20px;
  height: 17px;
}
.coupon {
  width: 12px;
  height: 10px;
}
.content {
  position: absolute;
  top: 10.42%;
  width: 360px;
  margin: 0 15px;

  .content-block {
    // height: 73px;
    margin-bottom: 15px;
    border-radius: 10px;
    opacity: 1;
    padding: 15px;
    background: #ffffff;
    .content-block-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .content-block-top-right {
        font-family: Source Han Sans;
        font-size: 15px;
        font-weight: 500;
        line-height: 26px;
        text-align: center;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        color: #56b756;
        text {
          margin-left: 6px;
        }
      }
    }
    .content-block-time {
      margin-top: 15px;
    }
  }
}
.custom-shadow {
  border-radius: 10px;
}
.button-warp {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 12px 15px;
  background-color: #fff;
}
.share-white {
  width: 15px;
  height: 15px;
  //margin-right: 6px;
  //position: absolute;
  //bottom: 0;
}
</style>
